<template>
	<div class="wrap">
		<div class="anchorStation-all">
			<!-- 电台导航 -->
			<RadioNav />
			<!-- 电台内容 -->
			<div class="radioContent" v-if="isShow">
				<!-- 推荐 -->
				<div class="recommendPro">
					<div class="recommendTitle">
						<a class="title">{{ recommendProTitle }}</a>
						<a class="more">更多 ></a>
					</div>
					<ul class="proList">
						<li v-for="item in proList" :key="item.id">
							<img class="proList-img" :src="item.coverUrl" />
							<div class="proList-text">
								<h5>{{ item.name }}</h5>
								<p>{{ item.radio.name }}</p>
							</div>
							<a class="proList-cate">{{ item.radio.category }}</a>
						</li>
					</ul>
				</div>
				<!-- 排行榜 -->
				<div class="recommendRanking">
					<div class="recommendTitle">
						<a class="title">节目排行榜</a>
						<a class="more">更多 ></a>
					</div>
					<ul class="rankingList">
						<li v-for="(item, index) in rankingList" :key="item.id">
							<div class="rankingNum">{{ index + 1 }}</div>
							<img class="proList-img" :src="item.program.coverUrl" />
							<div class="ranking-text">
								<h5>{{ item.program.name }}</h5>
								<p>{{ item.program.radio.name }}</p>
							</div>
							<span class="hearBar">
								<i style="width: 92%">
									<i></i>
								</i>
							</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 各种电台 -->
			<template v-if="isShow">
				<NewRadio
					:radioType="radioType"
					v-for="radioType in radioTypes"
					:key="radioType"
				/>
			</template>
			<RadioRanking v-if="!isShow" />
		</div>
	</div>
</template>

<script>
export default {
	name: "AnchorStation",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import NewRadio from "./component/NewRadio.vue";
import RadioNav from "./component/RadioNav.vue";
import RadioRanking from "./component/RadioRanking.vue";
import "./style/index.css";
import "./style/iconfont.css";

import { getRecommendPro, getRecommendRanking } from "@/api/AnchorStation";

const isShow = ref(true);
const recommendProTitle = ref("");
const proList = ref([]);
const rankingList = ref([]);
const radioTypes = [2, 3, 13, 2001];

const getRecommendPros = async () => {
	const data = await getRecommendPro();
	recommendProTitle.value = data.name;
	proList.value = data.programs;
};
const getRecommendRankings = async () => {
	const data = await getRecommendRanking(10);
	// console.log(data);
	rankingList.value = data.toplist;
};

onMounted(() => {
	getRecommendPros();
	getRecommendRankings();
});
</script>

<style scoped></style>
